<template>
    <div>
        <el-button type="primary" :disabled="!props.datas" @click="lookHistory">历史记录</el-button>

        <el-dialog v-model="historyDialogShow" title="历史记录" width="800">
            <el-table :data="historyData" border style="width: 100%" class="table-style-1">
                <el-table-column :label="item.label" :prop="item.prop"
                    v-for="item in historyRecordColumns"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import {
    getOrderOperationRecordsList
} from "@/api/plmFirstOrderProcessing";
import {
    formatDate,
} from "@/utils/format";
export default {
    props: ['datas', 'name'],
    setup(props) {
        const state = reactive({
            historyRecordColumns: [],
            historyData: [],
            historyDialogShow: false
        })

        if (props.name == 'orderProcessing') {
            state.historyRecordColumns = [{
                prop: "recordNum",
                fixedWidth: 100,
                label: "辦單號",
                show: true,
            },
            {
                prop: "createUser.nickName",
                fixedWidth: 100,
                label: "操作人",
                show: true,
            },
            {
                prop: "CreatedAt",
                fixedWidth: 100,
                label: "时间",
                show: true,
            },
            {
                prop: "dataBefore",
                fixedWidth: 100,
                label: "操作前",
                show: true,
            },
            {
                prop: "dataAfter",
                fixedWidth: 100,
                label: "操作後",
                show: true,
            },
            {
                prop: "version",
                fixedWidth: 100,
                label: "版本",
                show: true,
            }]
        }

        function lookHistory(params) {
            getOrderOperationRecordsList({ recordNum: props.datas }).then(res => {
                if (res.code == 0) {
                    state.historyData = res.data.list.map((item) => {
                        item.CreatedAt = item.CreatedAt ? formatDate(item.CreatedAt, "yyyy-MM-dd hh:mm:ss") : "";
                        item.UpdatedAt = item.UpdatedAt ? formatDate(item.UpdatedAt, "yyyy-MM-dd hh:mm:ss") : "";
                        return item;
                    });
                    state.historyDialogShow = true
                }
            })
        }

        return {
            ...toRefs(state), lookHistory, props
        }
    }
}
</script>

<style lang="scss" scoped></style>